<template>
  <div id="myFocusPage">
    <x-header title="我的关注" :right-options="{showMore: true}" @on-click-more="show = true"></x-header> 
    <tab v-model="index" :line-width=2 active-color='#fc378c' prevent-default @on-before-index-change="switchTabItem">
      <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2"  :key="index">{{item}}</tab-item>
    </tab>
    <swiper id="mySwiper" v-model="index" :show-dots="false" ref="mySwiper">
      <shop-cell :list="dataList"></shop-cell>
    </swiper>
  </div>
</template>



<script>
import { Tab, TabItem, Swiper, SwiperItem , XHeader } from 'vux'
import ShopCell from '../../components/toolComponent/shopCell.vue'
import $ from 'jquery'

const list = () => ['商品', '店铺']
const shangpinListFn = () => [
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '商品1',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '商品2',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  }
  ,
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '商品3',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  }
  ,
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '商品4',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  }
  ,
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '商品5',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  }
  ,
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '商品6',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  }
  ,
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '商品7',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  }
  ,
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '商品8',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  }
  ,
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '商品9',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  }
]
const dianpuListFn = () => [
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺1',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺2',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺3',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺4',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺5',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺6',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺7',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺8',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺9',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺10',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺11',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  },
  {
    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
    title: '店铺12',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell'
  }
]

export default {
  components: {
    ShopCell,
    XHeader,
    Tab,
    TabItem,
    Swiper,
    SwiperItem
  },
  data () {
    return {
      dataList:shangpinListFn(),
      list2: list(),
      demo2: '商品',
      demoDisabled: 'A',
      index: 0,
      shangpinList:shangpinListFn(),
      dianpuList:dianpuListFn()
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.$refs.mySwiper.xheight = '300px'
      var that = this;
      $(function () {
        var windowHeight = $(window).height()
        var headerHeight = $(".vux-header").outerHeight()
        var tabHeight = $(".vux-tab").outerHeight()
        that.$refs.mySwiper.xheight = windowHeight - headerHeight - tabHeight + 'px'
        $(".vux-swiper").css({"overflow":"scroll"})
      })
    })
  },
  methods: {
    switchTabItem (index) {
      this.$vux.loading.show({
        text: 'loading'
      })
      var that = this
      setTimeout(() => {
        this.$vux.loading.hide()
        that.$data.index = index
        if (index == 0) {
          that.$data.dataList = shangpinListFn()
        }
        if (index == 1) {
          that.$data.dataList = dianpuListFn()
        }
        $(".vux-swiper").scrollTop(0)
      }, 500)
    },
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

#myFocusPage .vux-slider{
  overflow: unset;
}

#myFocusPage #mySwiper .vux-swiper{
  overflow: unset;
}

.tab-swiper {
  background-color: #fff;
  height: 100px;
}
</style>